<template>
  <div class="main"></div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      analysis: [
        {
          src:
            "",
          name: "PM10",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "PM2.5",
          number: "19ug/m³",
        },
        {
          src:
            "",
          name: "温度",
          number: "19℃",
        },
        {
          src:
            "",
          name: "湿度",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "TSP",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "二氧化硫",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "二氧化碳",
          number: "ug/m³",
        },
        {
          src:
            "",
          name: "风力",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "风速",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "风向",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "大气压",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "臭氧",
          number: "--",
        },
        {
          src:
            "",
          name: "光照",
          number: "--",
        },
        {
          src:
            "",
          name: "一氧化碳",
          number: "--",
        },
        {
          src:
            "",
          name: "噪音",
          number: "79ug/m³",
        },
      ],
      tq9: "",
      tq3: "",
      tianqi: {},
    };
  },
  created() { },
  mounted() {

  },
  methods: {
    getM() {
      this.$api
        .EnvironmentHJFX({ user_id: localStorage.getItem("user_id") })
        .then((res) => {
          var data1 = res.data.map((a) => a.datatime);
          var data2 = res.data.map((a) => a.pm25);
          var data3 = res.data.map((a) => a.pm10);
          var data4 = res.data.map((a) => a.tsp);
          let myChart3 = echarts.init(document.getElementById("schart3"));
          let options3 = {
            // backgroundColor: 'rgba(240,240,240,1)',
            title: {
              // text: '人员管理趋势图', //主标题
              textStyle: {
                color: "#000", //颜色
                fontStyle: "normal", //风格
                fontWeight: "400", //粗细
                fontFamily: "Microsoft yahei", //字体
                fontSize: 22, //大小
                align: "center", //水平对齐
              },
              // subtext:'副标题',      //副标题
              // subtextStyle:{          //对应样式
              //     color:'#F27CDE',
              //     fontSize:14
              // },
              itemGap: 7,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            legend: {
              textStyle: {
                color: "#fff", //颜色
                fontStyle: "normal", //风格
                fontWeight: "400", //粗细
                fontFamily: "Microsoft yahei", //字体
                fontSize: 18, //大小
                align: "center", //水平对齐
              },
              data: ["PM2.5", "PM10", "TSP"],
            },

            grid: {
              left: "2%",
              right: "5%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                axisLine: {
                  lineStyle: { color: "rgb(250,250,250)" }, // x轴坐标轴颜色
                },

                axisLabel: {
                  color: "#fff",
                  formatter: "{value}", //单位
                  show: true,
                  textStyle: {
                    color: "#c3dbff", //更改坐标轴文字颜色
                    fontSize: 14, //更改坐标轴文字大小
                    fontWeight: 500,
                  },
                },
                name: "时间点",
                type: "category",
                boundaryGap: false,
                data: data1,
              },
            ],
            yAxis: [
              {
                axisLine: {
                  lineStyle: { color: "rgb(250,250,250)" }, // x轴坐标轴颜色
                },
                axisLabel: {
                  lineStyle: { color: "rgb(250,250,250)" }, // x轴坐标轴颜色
                  formatter: "{value}", //单位
                  show: true,
                  textStyle: {
                    color: "#c3dbff", //更改坐标轴文字颜色
                    fontSize: 14, //更改坐标轴文字大小
                    fontWeight: 500,
                  },
                },
                name: "值ug/m³",
                type: "value",
              },
            ],
            series: [
              {
                name: "PM2.5",
                type: "line",
                stack: "总量",
                smooth: true,
                symbol: "circle",

                symbolSize: 8, //拐点圆的大小
                color: ["#44b9f6"], //折线条的颜色
                data: data3,
                areaStyle: {
                  // type: 'default',
                  // color:'#70eeff'
                  normal: {
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#44b9f6",
                      },
                      {
                        offset: 0.5,
                        color: "#73edff",
                      },
                      {
                        offset: 1,
                        color: "#f0f7ff",
                      },
                    ]),
                  },
                },
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    color: "#296aff", // 会设置点和线的颜色，所以需要下面定制 line
                    borderColor: "#7be7ff", // 点边线的颜色
                  },
                },
                lineStyle: { color: "#65bfff" },
              },
              {
                name: "PM10",
                type: "line",
                stack: "总量",
                smooth: true,
                symbol: "circle",
                symbolSize: 8, //拐点圆的大小
                color: ["#E6A23C"], //折线条的颜色

                data: data2,
                // areaStyle: {
                //     type: 'default',
                //     color: 'rgba(240,240,240,1)'
                // },
                lineStyle: { color: "#E6A23C", type: "solid" },
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    color: "#E6A23C", // 会设置点和线的颜色，所以需要下面定制 line
                    borderColor: "#ffebee", // 点边线的颜色
                  },
                },
              },
              {
                name: "TSP",
                type: "line",
                stack: "总量",
                smooth: true,
                symbol: "circle",
                symbolSize: 8, //拐点圆的大小
                color: ["blue"], //折线条的颜色

                data: data4,
                // areaStyle: {
                //     type: 'default',
                //     color: 'rgba(240,240,240,1)'
                // },
                // lineStyle: { color: 'rgb(252, 20, 20)', type: 'dashed' },
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    color: "#409EFF", // 会设置点和线的颜色，所以需要下面定制 line
                    borderColor: "#ffebee", // 点边线的颜色
                  },
                },
              },
            ],
          };
          myChart3.setOption(options3);
          window.addEventListener("resize", function () {
            myChart3.resize();
          });
        })
        .catch(() => { });

      this.$axios
        .get(
          "https://v0.yiketianqi.com/api?version=v10&appid=29886216&appsecret=9zzGvRmJ&cityid=101190801"
        )
        .then((res) => {
          this.tianqi = res.data;

          this.tianqi.so2 = parseInt(this.tianqi.so2);
          this.analysis[5].number = res.data.so2 + "ug/m³";
          this.analysis[11].number = res.data.o3 + "ug/m³";
        })
        .catch(() => { });

      this.$api
        .EnvironmentFindEnvironment({
          user_id: localStorage.getItem("user_id"),
        })
        .then((res) => {
          this.analysis[0].number = res.data.data.pm10 + "ug/m³";
          this.analysis[1].number = res.data.data.pm25 + "ug/m³";
          this.analysis[2].number = res.data.data.tem + "℃";
          this.analysis[3].number = res.data.data.hum + "℃";
          this.analysis[4].tsp = res.data.data.tsp + "ug/m³";

          this.analysis[6].number = "--ug/m³";
          this.analysis[7].number = res.data.data.wp + "级";
          this.analysis[8].number = res.data.data.ws + "m/s";

          this.analysis[9].number = res.data.data.wd;
          this.analysis[10].number = "--kpa";
          this.analysis[14].number = res.data.data.noise + "db";
        })
        .catch((err) => { });
    },

    schart1() {
      this.$axios
        .get(
          "https://www.tianqiapi.com/api?version=v1&appid=29886216&appsecret=9zzGvRmJ&cityid=101190801"
        )
        .then((res) => {
          var data5 = res.data.data[0].air;
          var data6 = res.data.data[0].air_level;
          this.tq9 = res.data.data[0].air;
          this.tq3 = res.data.data[0].air_level;
          let myChart1 = echarts.init(document.getElementById("schart1"));
          let option1 = {
            title: {
              top: 20,
              left: "center",
              text: "空气质量指数",
              textStyle: {
                //  padding: 5,				// 提示框浮层的文本样式。...
                color: "#BDEDF4",
              },
            },
            // backgroundColor: "#000",
            tooltip: {
              // 本系列特定的 tooltip 设定。
              show: true,
              formatter: "{b}：{c}%",
              backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
              borderColor: "#fff", // 提示框浮层的边框颜色。...
              borderWidth: 10, // 提示框浮层的边框宽。...
              padding: 25, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
              textStyle: {
                // 提示框浮层的文本样式。...
                // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
              },
            },

            series: [
              {
                name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                type: "gauge", // 系列类型
                radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45, // 仪表盘结束角度,默认 -45
                clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
                max: 400, // 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。

                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
                  lineStyle: {
                    // 仪表盘轴线样式。
                    color: [
                      [0.125, "#3EFF25"],
                      [0.25, "#E1FF22"],
                      [0.375, "#FFD228"],
                      [0.5, "#FFA337"],
                      [0.75, "#FF4B00"],
                      [1, "red"],
                    ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 30, //轴线宽度,默认 30。
                    // shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#ccc",		//阴影颜色。支持的格式同color。
                  },
                },

                splitLine: {
                  // 分隔线样式。
                  show: false, // 是否显示分隔线,默认 true。
                  length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
                  lineStyle: {
                    // 分隔线样式。
                    color: "#aaa", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 2, //线度,默认 2。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: "#ccc", //阴影颜色。支持的格式同color。
                  },
                },

                axisTick: {
                  // 刻度(线)样式。
                  show: true, // 是否显示刻度(线),默认 true。
                  splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
                  length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
                  lineStyle: {
                    // 刻度线样式。
                    color: "#eee", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 1, //线度,默认 1。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    // // shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                  },
                },

                axisLabel: {
                  // 刻度标签。
                  show: true, // 是否显示标签,默认 true。
                  distance: 5, // 标签与刻度线的距离,默认 5。
                  color: "#fff", // 文字的颜色,默认 #fff。
                  fontSize: 15, // 文字的字体大小,默认 5。
                  formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                },

                pointer: {
                  // 仪表盘指针。
                  show: true, // 是否显示指针,默认 true。
                  length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                  width: 5, // 指针宽度,默认 8。
                },

                itemStyle: {
                  // 仪表盘指针样式。
                  color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
                  opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                  borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                  borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                  // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                  // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                },

                title: {
                  // 仪表盘标题。
                  show: true, // 是否显示标题,默认 true。
                  offsetCenter: [0, "20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "#3EFF25", // 文字的颜色,默认 #333。
                  fontSize: 20,
                  fontWeight: 600, // 文字的字体大小,默认 15。
                },

                detail: {
                  // 仪表盘详情，用于显示数据。
                  show: true, // 是否显示详情,默认 true。
                  offsetCenter: [0, "50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "auto", // 文字的颜色,默认 auto。
                  fontSize: 40, // 文字的字体大小,默认 15。
                  formatter: "{value}", // 格式化函数或者字符串
                },

                data: [
                  {
                    name: data6,
                    value: data5,
                  },
                ],
              },
            ],
          };

          myChart1.setOption(option1);
          window.addEventListener("resize", () => {
            myChart1.resize();
          });
        });
    },
  },
};
</script>
<style src="./css/page10.css" scoped>
</style>
